<template>
  <div class="notifyMe">
    <SearchCom class="search_box" @searchEvent="searchEvent" />
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option" @change="handleDate" />
    </van-dropdown-menu>
    <!-- <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="48"
      class="notifyMe_box"
      finished-text="没有更多了"
      @load="onLoad"
    > -->
    <div class="notifyMe_box">
      <div class="item" v-for="item in planList" :key="item.id" @click="goTicket(item)">
        <p class="title">
          {{ item.reporterName || '-' }}给您知会了编号
          <span> {{ item.workOrderNumber || '-' }}</span>
          工单
        </p>
        <p class="date">结束时间: {{ item.updateTime || '-' }}</p>
        <img src="@/assets/images/back.svg" class="more" />
      </div>
    </div>
    <!-- </van-list> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { getNotifiedPerson } from '@/api/workOrder.js';

// 获取当前日期
const today = new Date();
// 获取一周前的日期
const oneWeekAgo = new Date(today),
  oneYearAgo = new Date(today);
oneWeekAgo.setDate(today.getDate() - 7);
oneYearAgo.setFullYear(today.getFullYear() - 1);
// 格式化日期为 yyyy-MM-dd
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const week = `${formatDate(oneWeekAgo)}_${formatDate(today)}`;
const year = `${formatDate(oneYearAgo)}_${formatDate(today)}`;
const option = [
  { text: '全部', value: '' },
  { text: '过去一周', value: week },
  { text: '过去一年', value: year },
];
const value = ref('');
const planList = ref([]);
const searchData = reactive({
  number: '',
  startTime: '',
  endTime: '',
});
const loading = ref(false);
onMounted(() => {
  getList();
});

function handleDate(val) {
  if (!val) {
    searchData.startTime = '';
    searchData.endTime = '';
    getList();
    return;
  }
  const arr = val && val.split('_');
  if (arr) {
    searchData.startTime = arr[0];
    searchData.endTime = arr[1];
    getList();
  }
}
function goTicket(data) {
  // router.push({ name: 'ticketDetail', params: { data: JSON.stringify(data) } });
}
function getList() {
  getNotifiedPerson(searchData)
    .then((res) => {
      if (res.data) {
        planList.value = res.data || [];
        loading.value = false;
        // if (planList.value.length >= total.value) {
        //   finished.value = true;
        // }
      } else {
        planList.value = [];
        // finished.value = true;
      }
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      loading.value = false;
    });
}

function searchEvent(val) {
  searchData.number = val;
  planList.value = [];
  getList();
}
</script>

<style scoped lang="scss">
.notifyMe {
  padding: 0 15px 48px 15px;
  width: 100%;
  height: calc(100vh - 50px);
  overflow-y: hidden;
  ::v-deep .van-dropdown-menu__bar {
    width: 100px;
  }
  .notifyMe_box {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 80px;
  }

  .item {
    height: 60px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 20px;
    position: relative;
    border-bottom: 1px solid #d9d9d9;
  }
  .title {
    width: 80%;
    color: #333333;
    margin-bottom: 10px;
    span {
      color: #0a92fe;
    }
  }
  .date {
    color: #999999;
  }
  .more {
    position: absolute;
    right: 24px;
    bottom: 10px;
    transform: rotate(180deg);
  }
  .search_box {
    margin: 16px 0;
  }
}
</style>
